<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示页面</title>
    <th:block th:include="material/core/resources::headers"/>
</head>
<body>
<div>
    <h1>纯手工打造</h1>
    <div>
        <div style="display: inline-block">
        <button th:onclick="|xadmin.open('添加','@{/spring/user/insert}',600,400)|" class="layui-btn">
            添加
        </button>
        </div>
        <div style="display: inline-block">
        <form class="layui-form layui-col-space5" style="float: right">
            <input type="text" name="info" id="info" placeholder="请输入要查询的用户名" autocomplete="off"
               class="layui-input">
            <button class="layui-btn" lay-submit="" lay-filter="search" onclick="searchInfo();return false;"><i
                    class="layui-icon">&#xe615;</i></button>
        </form>
        </div>
    </div>
    <div>
        <table id="tab_show"></table>
    </div>
</div>
</body>
</html>

<!-- 动态渲染列表数据 -->
<script>
    let tableIns;
    layui.use(['table'], function () {
        const table = layui.table;
        tableIns = table.render({
            height: 512,
            elem: '#tab_show',
            url: '/spring/user/showInfo',
            method: "post",
            page: true,
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '编号', width: 110, sort: true, align: 'center'},
                    {field: 'name', title: '名称',  sort: true,align: 'center'},
                    {field: 'age', title: '年龄', sort: true, align: 'center'},
                    {field: 'email', title: '邮箱',sort: true,  align: 'center'},
                    {field: 'create_time', title: '创建时间',sort: true,  align: 'center'},
                    {field: 'update_time', title: '更新时间',sort: true,  align: 'center'},
                    {
                        field: 'action', title: '操作', templet(d) {
                            // 反引号 在里面写字符串 可以换行
                            // 取变量， ${}
                            const updateUrl = `${pathPrefix}/spring/user/update?id=${d.id}`;
                            return `
                                <div class="td-manage">
                                      <a title="编辑" onclick="xadmin.open('编辑','${updateUrl}',800,600)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a title="删除" onclick="userDelete(${d.id})" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                </div>
                            `
                        }
                    },
                ]
            ],
            /* 响应 */
            parseData(res) {
                return {
                    "code": res.success ? 0 : 300,
                    "count": res.data.total,
                    "data": res.data.list
                }
            }
        });
    });

    function userDelete(id) {

        layer.confirm('确认要删除吗？', function () {
            $.ajax({
                /* 路由更改 */
                url: pathPrefix + '/spring/user/delete/' + id,
                type: 'delete',
                success(res) {
                    if (res.success) {
                        layer.msg("删除成功");
                        setTimeout(function () {
                            tableIns.reload();
                        }, 500);
                    }
                }
            })
        });
    }
</script>


<!--查询-->
<script>
    function searchInfo() {
        const num = $("#info").val();
        layui.use('table', function () {
            const table = layui.table;
            alert(num)
            table.render({
                height: 512,
                elem: '#tab_show',
                url: pathPrefix +'/spring/user/select/'+ num,
                method: "post",
                page: true,
                cols: [
                    [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'id', title: '编号', width: 110, sort: true, align: 'center'},
                        {field: 'name', title: '名称',  sort: true,align: 'center'},
                        {field: 'age', title: '年龄', sort: true, align: 'center'},
                        {field: 'email', title: '邮箱',sort: true,  align: 'center'},
                        {field: 'create_time', title: '创建时间',sort: true,  align: 'center'},
                        {field: 'update_time', title: '更新时间',sort: true,  align: 'center'},
                        {
                            field: 'action', title: '操作', templet(d) {
                                // 反引号 在里面写字符串 可以换行
                                // 取变量， ${}
                                const updateUrl = `${pathPrefix}/spring/user/update?id=${d.id}`;
                                return `
                                <div class="td-manage">
                                      <a title="编辑" onclick="xadmin.open('编辑','${updateUrl}',800,600)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a title="删除" onclick="userDelete(${d.id})" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                </div>
                            `
                            }
                        },
                    ]
                ],
                parseData(res) {
                    return {
                        "code": res.success ? 0 : 300,
                        "count": res.data.total,
                        "data": res.data.list
                    }
                }
            })
        });
    }

</script>
